<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Selector2</title>

<script src='../lib/jquery-2.1.1.js'></script>
<script>
$(document).ready(function(){
 		//input 태그중 속성의 유형이 type인 모든 element 선택
	$('input[type]').css('width','30px');

		//label 태그중 abc속성이 있는 모든 element 선택
	$('label[abc]').css('color','#ff0000');
		
		
		//label 태그중 abc속성이 있는 모든 element 선택	(문자크기를 변경)
	$('label[abc=abc]').css('font-size','40pt');	
		
		//label 태그중 abc속성값이 ac로 시작하는 모든 element 선택	(굵은체로 변경)
	$('label[abc^=ac]').css({'font-weight':'bold','color':'#0000ff'});

		
});


</script>
</head>
<body>
<h3>Attribute를 사용한 Selector Example<hr/></h3>
	<div>
		<label abc='abc'><input type='checkbox' name='hobby' abc='abc'> 독서</label>
		<label abc='ac'><input type='checkbox' name='hobby' abc='ab'> 축구</label>
		<label abc='ac'><input type='checkbox' name='hobby' abc='a'> 야구</label>
		<label><input type='checkbox' name='hobby' abc='abc'> 여행</label>
	</div>

</body>
</html>